<template>
  <div class="container register-container">
    <Headbar />
    <HeadTitle title="欢迎登录" switchLogin="register" />
    <div class="login-banner">
      <div class="login-wrap">
        <div class="enter-main">
          <div class="login-tabs">
            <ul class="login-tabs-nav">
              <li v-for="(i, index) in loginNavs"
               @click="clickLoginNavs(index)"
              :class="loginActive == index?'loginActive':''">
              {{ i }}
              <span v-if="index == 0">|</span>
            </li>
            </ul>
            <div class="login-tabs-main">
              <!-- 密码登录 -->
              <div class="paw-login" v-if="loginActive == 0">
                <el-form ref="pwForm" :model="pwForm" :rules="pwRules" label-width="0px" class="login-form" auto-complete="on">
                  <el-form-item prop="username">
                    <el-input class="default-input" v-model="pwForm.username" type="phone" maxlength="11" placeholder="请输入您的用户名" />
                  </el-form-item>
                  <el-form-item prop="password" class="password">
                    <el-input :type="pwdType" class="default-input" v-model="pwForm.password" name="password"
                      auto-complete="on"
                      placeholder="请输入您的密码" @keyup.enter.native="handlePwLogin" />
                      <span class="show-pwd" @click="showPwd">
                        <i v-if="pwdType == 'password'"> <img src="@/assets/images/login/close-eye.png"> </i>
                        <i v-else> <img src="@/assets/images/login/open-eye.png"> </i>
                      </span>
                  </el-form-item>
                  <div class="over join-btn mb-20">
                    <a class="fl" @click="routeToOut(URL.jumpSeller+'/seller')">卖家登录</a>
                    <a class="fr" @click="routeToOut(URL.jumpSeller+'/seller/forgetPassword?from=mall')">忘记密码</a>                  </div>
                  <el-form-item class="register-item">
                    <el-button class="register-button" :loading="loading" type="primary" style="width:100%;" @click="handlePwLogin('pwForm')">
                      登录
                    </el-button>
                    <p class="old-login-tips">如果您是推广版用户， <a @click="routeToOut(URL.oldSiteLogin, 'new')">点击此处登录</a> </p>
                  </el-form-item>
                </el-form>
              </div>

              <!-- 验证码登录 -->
              <div class="vcode-login" v-if="loginActive == 1">
                <el-form ref="codeForm" :model="codeForm" :rules="codeRules" label-width="0px" class="login-form" auto-complete="on">
                  <el-form-item prop="mobile">
                    <el-input class="default-input" v-model="codeForm.mobile" type="phone" maxlength="11" placeholder="请输入您的手机号码" />
                  </el-form-item>
                  <el-form-item prop="smsValidateCode">
                    <el-input class="input-vcode" v-model="codeForm.smsValidateCode" type="text" maxlength="6"
                     @keyup.enter.native="handleCodeLogin"
                     auto-complete="on" placeholder="请输入验证码" />
                    <GetVcode type="login" :params="codeForm.mobile" @vcodeCallback="sendVcodeSuccess" />
                  </el-form-item>
                  <div class="over join-btn mb-20">
                    <a class="fl" @click="routeToPath(URL.jumpSeller+'/seller')">卖家登录</a>
                    <a class="fr" @click="routeToOut(URL.jumpSeller+'/seller/forgetPassword?from=mall')">忘记密码</a>
                  </div>
                  <el-form-item class="register-item">
                    <el-button class="register-button" :loading="loading" type="primary" style="width:100%;" @click="handleCodeLogin('codeForm')">
                      登录
                    </el-button>
                    <p class="old-login-tips">如果您是推广版用户， <a @click="routeToOut(URL.oldSiteLogin, 'new')">点击此处登录</a> </p>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footbars type="login" />
  </div>
</template>

<script>
import GetVcode from '@/components/GetVcode';
import { registerSendCode, registerMember, pwLogin, codeLogin } from '@/api/login'
import Headbar from '@/components/Layouts/Headbar'
import Footbars from '@/components/Layouts/Footbars'
import HeadTitle from '@/components/Layouts/HeadTitle'
import config from '@/seo/config'

// 手机号码验证
const validateMobile = (registerRules, value, callback) => {
  if (value == null || value === '') {
    callback(new Error('请输入手机号码'));
  }  else {
    if (value !== '') {
        var reg = /^1[3456789]\d{9}$/;
        if(!reg.test(value)){
          callback(new Error('请输入有效的手机号码'));
        }
      }
    callback();
  }
};
// 密码验证
const validatePass = (registerRules, value, callback) => {
  if (!value) {
    callback(new Error('请输入密码'))
  } else if (value.length < 6 || value.length > 16) {
    callback(new Error('密码长度在6~16之间'));
  } else {
      var reg = /^[0-9a-zA-Z]{6,16}$/g
      if (!reg.test(value)) {
        callback(new Error('密码为6~16位数字或字母组成'));
      }
      callback()
  }
};

// 验证码验证
const validateCode = (registerRules, value, callback) => {
  if (value == null || value === '') {
    callback(new Error('请输入验证码'));
  }  else {
    if (value !== '') {
      var reg = /^\d{6}$/;
      if(!reg.test(value)){
        callback(new Error('请输入有效的验证码'));
      }
    }
    callback();
  }
};
// 协议验证
const validateRead = (registerRules, value, callback) => {
  if (!value) {
    callback(new Error('请先阅读并勾选同意协议'));
  }  else {
    callback();
  }
};

export default {
  name: 'Login',
  components: {
    GetVcode,
    Headbar,
    Footbars,
    HeadTitle,
  },
  data() {
    return {
      pwForm: {
        username: '',
        password: '',
      },
      pwRules: {
        username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
        password: [{ required: true, trigger: 'blur', validator: validatePass }],
      },
      codeForm: {
        mobile: null,
        smsValidateCode: null,
      },
      codeRules: {
        mobile: [{ required: true, trigger: 'blur', validator: validateMobile }],
        smsValidateCode: [{ required: true,   trigger: 'blur', validator: validateCode }],
      },
      loading: false,
      pwdType: 'password',
      staffId: this.getUrlParams('staffId'),
      loginNavs: ['密码登录', '验证码登录'],
      loginActive: 0,
      redirect: this.getUrlParams('redirect'),
    }
  },
  created() {
    // document.querySelectorAll(".nb-icon-wrap")[0].style.display = 'none';
  },
  head: config.login,
  methods: {
    // 登录统一操作
    loginHandle() {
      this.loading = true
      console.log(this.$router)
      this.$store.dispatch('Login', {
        pwForm: this.pwForm,
        codeForm: this.codeForm,
        loginActive: this.loginActive
      }).then(res => {
        setTimeout(()=>{
          this.$router.push({ path: unescape(this.redirect) || '/' })
        }, 1000)
        this.loading = false
      }).catch(err =>{
        this.loading = false
      })
    },
    // 密码登录
    handlePwLogin(valid) {
      this.$refs.pwForm.validate(valid => {
        if (valid) {
          this.loginHandle();
        }
      })
    },
    // 验证码登录
    handleCodeLogin(valid) {
      this.$refs.codeForm.validate(valid => {
        if (valid) {
          this.loginHandle();
        }else{

        }
      })
    },
    // 切换密码/验证码登录
    clickLoginNavs(index) {
      this.loginActive = index;
      if(index == 0){
        this.$refs.codeForm.clearValidate();
      }else{
        this.$refs.pwForm.clearValidate();
      }
    },
    // 短信发送成功
    sendVcodeSuccess(data) {
      this.codeForm.smsValidateCode = data;
    },
    // 显示隐藏密码
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = 'text'
      } else {
        this.pwdType = 'password'
      }
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/pages/login.scss';
.old-login-tips{
  padding: 0;
  text-align: center;
  margin: 0;
  color: #888;
}
.login-banner{
  background-image: url('../../assets/images/login/bg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  min-width: 1200px;
  height: 520px;
}
.login-wrap{
  width: 1200px;
  overflow: hidden;
  margin: 0 auto;
  padding-top: 68px;
}
.enter-main{
  background-color: #fff;
  width: 270px;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 50px 30px;
  padding-bottom: 25px;
  float: right;
  .login-form{
    width: 265px;
  }
}
.text-center{
  text-align: center;
}
.enter-main .btn-submit{
  width: 300px;
}
.input-vcode{
  width: 125px;
}
.password{
  position: relative;
}
.show-pwd{
  position: absolute;
  left: 234px;
  top: 5px;
  img{
    width: 20px;
    height: 20px;
  }
}
.agreement{
  font-size: 12px;
  color: #666;
}
.register-button{
  width: 100%;
  padding: 14px 0;
  font-size: 16px;
  background-color: #255B8B;
  border-color: #255B8B;
  transition: all .3s;
  &:hover{
    opacity: 0.9;
  }
}
.register-item{
  margin-bottom: 0;
}
</style>
<style lang="scss">
  .register-container{
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background-color: #255B8B;
      border-color: #255B8B;
    }
    .el-checkbox{
      margin-right: 10px;
    }
  }
</style>
